<template>
  <div class="exchange_code">
    <OrderGoods :evaluate="0" :type="1" :cartInfo="codeInfo || []"></OrderGoods>
    <div class="content_info">
      <div class="info_title">兑换码</div>
      <div class="info_detail">
        <template v-for="(item, i) in virtualNumItem">
          <div class="code_item" :key="i">
            <div class="code" style="width:289px">
              兑换码{{ i + 1 }}：
              <span class="num">{{ item.num }}</span>
            </div>
            <span @click="copy(item.num)" class="copy">复制</span>
          </div>
        </template>
      </div>
      <div class="virtualNumMore" v-if="virtualNum.length > 3" @click="expandMoreclick">
        <div class="code flex">
          {{ expandMoreClass == 1 ? '展开更多' : '收起' }}
          <span :class="expandMoreClass == 1 ? 'top' : 'bottom'">></span>
        </div>
      </div>
    </div>
    <div class="content_info">
      <div class="info_title">兑换流程</div>
      <div class="info_detail">
        <div class="text" v-html="exchangeDec">{{ exchangeDec }}</div>
      </div>
    </div>
    <div class="goodCall">
      <img src="../../assets/images/kefu.png" alt>
      <span @click="telshow()">拨打客服电话</span>
    </div>
    <!-- 客服弹窗 -->
    <div class="telbox" @click="telhide()" v-show="show == '1'">
      <div class="tel">
        <p class="telTitle">客服电话 {{ service_tel }}</p>
        <p class="telTime">工作日时间：周一至周五9:00-18:00</p>
        <p class="line"></p>
        <a :href="'tel:' + this.service_tel">
          <p class="telSend">拨打客服电话</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import OrderGoods from "@components/OrderGoods";
import { virtualCodeDetail } from "@api/order";
import ClipboardJS from "clipboard";
export default {
  data() {
    return {
      codeInfo: {},
      virtualNum: [],
      virtualNumItem: [],
      exchangeDec: "",
      show: 0,
      service_tel: "",
      expandMoreClass: 1
    };
  },
  components: {
    OrderGoods
  },
  created() {
    this.getDetail();
  },
  methods: {
    expandMoreclick() {
      this.expandMoreClass == 1
        ? (this.expandMoreClass = 2)
        : (this.expandMoreClass = 1);
      this.expandMoreClass == 1
        ? (this.virtualNumItem = this.virtualNum.slice(0, 4))
        : (this.virtualNumItem = this.virtualNum);
    },
    // 复制兑换码
    copy(code) {
      let clipboard = new ClipboardJS(".copy", {
        text: () => {
          return code;
        }
      });
      clipboard.on("success", () => {
        this.$dialog.success("复制成功");
      });
    },
    // 兑换码详情
    getDetail() {
      const order_id = this.$route.query.id;
      // const order_id = "iwh163091080846563306";
      if (!order_id) return this.$dialog.error("订单不存在");
      virtualCodeDetail({ order_id })
        .then(res => {
          // let arr = [];
          // res.data.cartInfo.map(item => {
          //   arr.push(item.cart_info);
          // });
          res.data.cartInfo.isVirtual = 1;
          this.codeInfo = res.data.cartInfo;
          this.virtualNum = res.data.virtual_num;
          this.exchangeDec = res.data.exchange_dec;
          this.service_tel = res.data.service_tel;
          this.virtualNum.length > 3
            ? (this.virtualNumItem = this.virtualNum.slice(0, 4))
            : (this.virtualNumItem = this.virtualNum);
        })
        .catch(err => {
          this.$dialog.error(err.msg);
          this.$router.go(-1);
        });
    },
    telshow() {
      console.log(this.service_tel.length);
      if (
        this.service_tel == null ||
        this.service_tel.length == "0" ||
        this.service_tel == undefined
      ) {
        return this.$dialog.toast({ mes: "系统正在维护中" });
      } else {
        this.show = "1";
      }
    },
    telhide() {
      this.show = "0";
    }
  }
};
</script>

<style lang="scss" scoped>
.content_info {
  width: 100%;
  margin-top: 0.2rem;
  background-color: #fff;
  padding: 0.3rem;
  box-sizing: border-box;
  .info_title {
    font-size: 0.3rem;
    font-weight: bold;
    color: #000000;
    padding-bottom: 0.24rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .info_detail {
    padding-top: 0.24rem;
    overflow: hidden;
    .code_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.42rem;
      .code {
        font-size: 0.3rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        .num {
          display: block;
          overflow-wrap: break-word;
          padding-top: 0.16rem;
          color: rgba(0, 0, 0, 1);
          font-weight: bold;
        }
      }
      .copy {
        font-size: 0.28rem;
        font-weight: 400;
        color: #4e8ac3;
      }
    }
    .text {
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 0.44rem;
      padding-bottom: 2.88rem;
    }
  }
  .virtualNumMore {
    text-align: center;
    .flex {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .top {
      display: block;
      padding-bottom: 0.18rem;
      transform: rotate(90deg);
    }
    .bottom {
      display: block;
      padding-top: 0.18rem;
      transform: rotate(-90deg);
    }
  }
}
.goodCall {
  position: fixed;
  bottom: 0;
  left: 0;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  height: 1.12rem;
  box-shadow: 0rem -0.02rem 0.08rem 0rem rgba(0, 0, 0, 0.11);
  border-bottom: 0.01rem solid #eee;
  font-size: 0.24rem;
  line-height: 1;
  background: #fff;
  .telSend {
    font-size: 0.32rem;
    color: #4473e1;
  }
  img {
    float: left;
    margin: 0.34rem 0.2rem 0 2.78rem;
    width: 0.36rem;
    height: 0.4rem;
  }
  span {
    display: block;
    padding: 0.42rem 0;
    text-align: left;
  }
}
.telbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.5);
  overflow: hidden;
  .tel {
    width: 6rem;
    height: 3.7rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.16rem;
    margin: 40% auto 0;
    box-sizing: border-box;
    text-align: center;
  }
  .telTitle {
    font-size: 0.34rem;
    color: #333;
    padding-top: 0.66rem;
  }
  .telTime {
    font-size: 0.32rem;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0.36rem;
  }
  .line {
    width: 100%;
    height: 0.01rem;
    margin: 0.68rem auto 0.3rem;
    background: rgba(0, 0, 0, 0.2);
  }
  .telSend {
    font-size: 0.32rem;
    color: #4473e1;
  }
}
</style>
